<script lang="ts" setup>
import {ref, watchEffect, reactive} from 'vue'

const id = ref(1)
const data = ref(null)
const a = ref(0)
const b = ref(0)

watchEffect(async () => {
  console.log('watchEffect(开始侦听)')
  //const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id.value}`)
  //data.value = await response.json()
  //console.log('a=', a.value)
  //console.log('b=', b.value)

  console.log('watchEffect(结束侦听)')
})

</script>
<template>
  <button @click="a++">修改a</button>
  <button @click="b++">修改b</button>
  <hr>
  a = {{ a }}, b = {{ b }}
  <hr>
  <button @click="id++">修改id - {{ id }}</button>
  <hr>
  {{ data }}

</template>
